/**
 * Created by zsgjs on 2017/2/13.
 */
import React, { Component } from 'react';
import { NativeModules } from 'react-native-tab-navigator'

import {
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    Navigator
} from 'react-native';

import model from '../classes/Model';

var Charts = require('../classes/Charts.js');

var list = ['掌金咨询', '直播间', '客服', '大数据', '数据汇', '掌金指标', '新手学院', '工具箱', '意见反馈', '分享App', '产品评分',''];

// var Modi =
var Found = React.createClass({

    render() {
        return (
        <Navigator
            initialRoute={{ component: FoundModule}}
            configureScene={(route) => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
            renderScene={this._renderScence} />
        )
    },

    _renderScence(route, navigator){
        let Component = route.component;
        return <Component {...route.params} navigator={navigator} />
    },

    configureScene(Navigator) {
        return Navigator.SceneConfigs.FloatFromBottom;
    },
});

const FoundModule = React.createClass({

    getInitialState() {
        var dataSource = new ListView.DataSource({rowHasChanged:  (row1, row2)=>row1 !== row2});
        return {
            listData: dataSource.cloneWithRows(list)
        }
    },

    render() {
        return (
            <View style={foundStyle.container}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=> {this.showCharts()}}
                >
                    <View style={foundStyle.topView}>
                        <Text style={foundStyle.navTitle}>名人堂</Text>

                        <View style={foundStyle.personListContent}>
                            <View style={foundStyle.personList}>
                                {this.renderPersonList()}
                            </View>
                            <Text style={foundStyle.personListArrow}>{'>'}</Text>
                        </View>
                    </View>
                </TouchableOpacity>

                <View style={foundStyle.bottomView}>
                    <ListView
                        contentContainerStyle={foundStyle.listStyle}
                        dataSource={this.state.listData}
                        showsHorizontalScrollIndicator={false}
                        initialListSize={12}
                        renderRow={this._renderRow}
                        bounces={false}
                    >

                    </ListView>
                </View>
            </View>
        )
    },

    showCharts() {


        const {navigator} = this.props;

        if (navigator) {
            navigator.push({
                component: Charts,

                params: {
                    'navTitle': '详情',
                    outputInfo: function (info) {
                        alert(info)
                    }
                }
            })
        }
    },

    renderPersonList() {
        var personsArr = [];
        var textArr = [['带了', 'NO.1'], ['是卡萨丁', 'NO.2'], ['家属', 'NO.3']];
        for (var i = 0; i < 3; i++) {
            personsArr.push(
                <View key={i} style={foundStyle.person}>
                    {this.renderPersonView(textArr[i])}
                </View>
            )
        }
        return personsArr;
    },


    renderPersonView(texts) {
        return (
            <View>
                <Image style={foundStyle.personAvator}></Image>
                <Text style={foundStyle.personName}>{texts[0]}</Text>
                <Text style={foundStyle.personSort}>{texts[1]}</Text>
            </View>
        )
    },

    _renderRow(data, secID, rowID) {
        var rowStyle;

        if (rowID % 3 == 0 || rowID % 3 == 1) {
            rowStyle = {borderRightColor: '#ddd', borderRightWidth: 1, borderBottomColor:'#ddd', borderBottomWidth:1}
        } else  {
            rowStyle = { borderBottomColor:'#ddd', borderBottomWidth:1}
        }
        if (data == '') {
            return (
                <View style={[foundStyle.cell, { borderBottomColor:'#ddd', borderBottomWidth:1}]}>
                </View>
            )
        } else {
            return(
                <View style={[foundStyle.cell, rowStyle]}>
                    <Image style={foundStyle.cellImage}></Image>
                    <Text style={foundStyle.cellText}>{data}</Text>
                </View>
            )
        }
    },
})

const foundStyle = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor:'#ddd'
    },

    topView: {
        height: 200,
        backgroundColor: 'red'
    },

    navTitle: {
        fontWeight: 'bold',
        fontSize:18,
        height: 44,
        color: 'white',
        marginTop: 20,
        width: model.screen_w,
        textAlign:'center',
        lineHeight: 44
    },

    personListContent: {
        height: 136,
        width: model.screen_w,
        flexDirection:'row'
    },

    personList: {
        height: 136,
        width: model.screen_w - 30 - 40,
        marginLeft: 40,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between'
    },

    person: {
        width: 80,
        height: 136,
        justifyContent:'space-around',
        alignItems:'center',
    },

    personAvator: {
        marginLeft: 8,
        width:64,
        height: 64,
        borderRadius: 32,
        backgroundColor:'orange'
    },

    personName: {
        width: 80,
        textAlign:'center',
        fontSize:14,
        color: 'white',
        marginTop: 10,
    },

    personSort: {
        width: 80,
        textAlign:'center',
        fontSize:13,
        color: 'white',
        marginTop: 5
    },

    personListArrow: {
        height: 136,
        lineHeight: 136,
        width: 30,
        textAlign:'center',
        fontWeight: 'bold',
        fontSize:18,
        color: 'white',
    },

    bottomView: {
        height: model.screen_h * 0.5 - 200 - 49,
    },

    listStyle: {
        width: model.screen_w,
        justifyContent: 'flex-start',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },

    cell: {
        backgroundColor: 'white',
        alignItems:'center',
        justifyContent: 'center',
        width: model.screen_w / 3,
        height: 115
    },

    cellImage: {
        width: 60,
        height: 60,
        backgroundColor:'orange'
    },

    cellText: {
        width: model.screen_w / 3 - 1,
        textAlign:'center',
        fontSize:14,
        color: 'black',
        marginTop: 10
    }

});

module.exports = Found;